<template>
  <div class="appeal-table">
    <el-table :data="tableData">
      <el-table-column
        :show-overflow-tooltip="true"
        v-for="(item, index) in options"
        :key="index"
        :prop="item.name"
        :label="item.displayname">
      </el-table-column>
      <el-table-column  :label="$t('public.operate')" width="160">
        <template scope="scope2">
          <span v-if="scope2.row.status !== 'invalid'">
            <el-button type="text" size="small" @click="reGrade(scope2.row)">{{$t('intelligentQualityCheck.intelRegrade')}}</el-button>
            <el-button type="text" size="small" @click="rejectAppeal(scope2.row._id)">{{$t('intelligentQualityCheck.intelReject')}}</el-button>
            <el-button type="text" size="small" @click="ListenRecording(scope2.row)" v-if="scope2.row.type === 'call'">{{$t('qualityCheck.ListenToTheRecording')}}</el-button>
          </span>
          <span v-else>{{$t('intelligentQualityCheck.intelGiveUpQualityResultOne')}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {getCache} from '@/utils/m7Utils.js'
  export default {
    name: 'appealTable',
    data () {
      return {
        options: [// 表头内容
          {displayname: this.$t('intelligentQualityCheck.intelServiceObj'), name: 'customerName'},
          {displayname: this.$t('intelligentQualityCheck.intelAppealType'), name: 'type_show'},
          {displayname: this.$t('intelligentQualityCheck.intelAppealTime'), name: 'createTime'},
          {displayname: this.$t('intelligentQualityCheck.intelAppealAgent'), name: 'createUser_show'},
          {displayname: this.$t('qualityCheck.qualityControlPersonnel'), name: 'gradeUser_show'},
          {displayname: this.$t('intelligentQualityCheck.intelAppealScore'), name: 'gradeAmount'},
          {displayname: this.$t('intelligentQualityCheck.intelAppealContent'), name: 'comment'}
        ]
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      reGrade (data) {
        this.$emit('reGrade', data)
      },
      rejectAppeal (id) {
        this.$emit('rejectAppeal', {'_id': id})
      },
      ListenRecording (value) {
        let path = ''
        let self = this
        this.recordFileName(value.fileServer, value.recordFileName, function (url) {
          path = url
          self.$emit('ListenRecording', {_id: value._id, path: path})
        })
      },
      recordFileName (server, name, callBack) {
        if (!server) {
          callBack('')
          return
        }
        let fileList = name.split('/')
        let userPbx = fileList[1]
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1 || server.indexOf('aliyuncs.com') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          callBack(server + '/' + name)
        } else if (document.location.protocol === 'https:') {
          if (userPbx) {
            getCache('accountPbx', userPbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              callBack(server + '/' + name)
            })
          } else {
            callBack(server + '/' + name)
          }
        } else {
          callBack(server + '/' + name)
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"

</style>
